<template>
	<div class="tab-bar-item" @click="itemClick">
		<slot name="item-icon-active" v-if="active"></slot>
		<slot name="item-icon" v-else></slot>
		<div :style="activeStyle">
			<slot name="item-text"></slot>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'TabBarItem',
		props:{
			path: String,
			activeColor:{
				type: String,
				default: "red"
			}
		},
		data() {
			return {
				// active: true
			}
		},
		computed: {
			active() {
				return this.$route.path == this.path ? true : ''
			},
			activeStyle() {
				return this.active ? {color: this.activeColor} : {}
			}
		},
		methods:{
			itemClick() {
				this.$router.replace(this.path)
			}
		}
	}
</script>

<style scoped>
		.tab-bar-item{
		flex: 1;
		text-align:center;
		height: 49px;
		font-size: 14px;
	}
	.tab-bar-item img{
		height: 24px;
		width: 24px;
		margin-top: 4px;
		vertical-align: middle;
		margin-bottom: 2px;
	}
	.active{
		/* color: #FF0000; */
	}
</style>
